<template>
  <div>
    <a-spin :spinning="spinning != 0">
      <a-button-group style="margin-bottom: 8px;">
        <a-button icon="user-add" @click="handleAdd">{{ $t('m.system.user.other.add_user') }}</a-button>
        <a-button icon="reload" @click="refresh">{{ $t('m.common.button.refresh') }}</a-button>
      </a-button-group>
      <a-table
        size="small"
        bordered
        rowKey="userKey"
        :columns="columns"
        :pagination="false"
        :dataSource="dataSource">
        <span slot="userAction" slot-scope="text, record">
          <a @click="handleDelete(record)">{{ $t('m.common.button.delete') }}</a>
        </span>
      </a-table>
    </a-spin>
    <bpm-select-user-dialog ref="bpmSelectUserDialog" @selectUserBack="selectUserBack"></bpm-select-user-dialog>
  </div>
</template>
<script>

  import {getAction, putAction, deleteAction} from '@/api/manage';
  import BpmSelectUserDialog from './BpmSelectUserDialog';
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "SetInstanceUsersData",
    components: {
      BpmSelectUserDialog
    },
    props: {
      processInstanceId: {
        type: String,
        default: null
      },
      taskId: {
        type: String,
        default: null
      },
      targetActivityId: {
        type: String,
        default: null
      },
      operateType: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        url: {
          getSetInstanceUserList: YchConstant.PREFIX_BPM + "/bpm-front/displayRest/getSetInstanceUserList/v1",
          addSetInstanceUserList: YchConstant.PREFIX_BPM + "/bpm-front/operateRest/addSetInstanceUserList/v1",
          deleteSetInstanceUserList: YchConstant.PREFIX_BPM + "/bpm-front/operateRest/deleteSetInstanceUserList/v1",
        },
        dataSource: [],
        spinning: 0,
        columns: [{
          title:this.$t('m.common.label.number'),
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        }, {
          title: this.$t('m.system.user.entity.realname'),
          align: "center",
          width: 180,
          dataIndex: 'name'
        }, {
          title: this.$t('m.system.org.entity.depName'),
          align: "center",
          width: 180,
          dataIndex: 'deptName'
        }, {
          title: this.$t('m.common.label.operate'),
          dataIndex: 'action',
          align: "center",
          width: 120,
          scopedSlots: {customRender: 'userAction'},
        }]
      }
    },
    methods: {
      handleAdd() {
        let button = {
          label: this.$t('m.bpm.design.process_select_user'),
          type: this.operateType,
          attribute: {
            taskId: this.taskId,
            targetActivityId: this.targetActivityId
          }
        };
        this.$refs.bpmSelectUserDialog.openNoMessage(button);
      },
      handleDelete(record) {
        const that = this;
        that.spinning++;
        deleteAction(this.url.deleteSetInstanceUserList, {
          processInstanceId: this.processInstanceId,
          targetActivityId: this.targetActivityId,
          userId: record.userKey
        }).then((res) => {
          if (res.success) {
            that.dataSource.splice(that.dataSource.indexOf(record), 1);
          } else {
            that.messageUtil.warning(res.message);
          }
        }).finally(() => {
          that.spinning--;
        });
      },
      selectUserBack(data) {
        const that = this;
        const currentUrl = this.url.addSetInstanceUserList + "?processInstanceId=" + this.processInstanceId + '&targetActivityId=' + this.targetActivityId;
        that.spinning++;
        putAction(currentUrl, data).then((res) => {
          if (res.success) {
            that.messageUtil.success(res.message);
            that.refresh();
          } else {
            that.messageUtil.warning(res.message);
          }
        }).finally(() => {
          that.spinning--;
        });
      },
      refresh() {
        const that = this;
        that.spinning++;
        getAction(this.url.getSetInstanceUserList, {
          processInstanceId: this.processInstanceId,
          targetActivityId: this.targetActivityId
        }).then((res) => {
          if (res.success) {
            that.dataSource = res.result;
          } else {
            that.messageUtil.warning(res.message);
          }
        }).finally(() => {
          that.spinning--;
        });
      }
    },
    mounted() {
      this.refresh();
    }
  }
</script>
